<!DOCTYPE html>
<html lang="en">
<head>
    <title>积分商城</title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <script src="/js/jquery/jquery.min.js"></script>
    <link rel="stylesheet" href="/js/bootstrap/css/bootstrap.min.css">
    <link rel="stylesheet" href="/css/font/css/font-awesome.min.css" />
    <link rel="stylesheet" href="/css/style.css" />
    <link rel="stylesheet" href="/css/reset.css" />
    <link rel="stylesheet" href="/css/goodsDecribedindex.css" />
    <link rel="stylesheet" href="/css/myProfiles.css" />
    <link rel="stylesheet" href="/css/goods.css" />
    <script type="text/javascript" src="/js/jquery-3.2.1.min.js"></script>
    <script type="text/javascript" src="/js/bootstrap.min.js"></script>
    <script src="/js/plugins/jrender/jrender.js"></script>
    <link rel="stylesheet" href="/js/plugins/dialog/dialog.css"/>
    <script src="/js/plugins/dialog/dialog.min.js"></script>
    <script src="/js/common.js"></script>
    <script type="text/javascript">
        var integral;
        var user;
        $(function () {
            // 获取用户id
            user = JSON.parse(sessionStorage.getItem("user"));
            $(".info").renderValues(user);

            // 获取用户积分
            integral = JSON.parse(sessionStorage.getItem("integral"));
            console.log("integral:" + integral);

            // 获取商品id
            var id = getParams().id;

            // 渲染商品封面，名称，单价
            var productJsonStr = sessionStorage.getItem('products');
            productEntity = JSON.parse(productJsonStr);
            console.log(productEntity);
            $(".table").renderValues(productEntity);

            // 渲染商品数量
            var conJsonStr = sessionStorage.getItem('cons');
            conEntity = JSON.parse(conJsonStr);
            console.log(conEntity);
            $("#goodsNum").renderValues(conEntity);

            // 渲染商品总价
            sum();
        });

        // 点击"+" ，增加购买数量
        function add() {
            var num = parseInt($("#goodsNum").val()) || 0;
            ifNum(num);
            $("#goodsNum").val(num + 1);
            sum();
        };

        // 点击"-" ，减少购买数量
        function sub() {
            var num = parseInt($("#goodsNum").val()) || 0;
            ifNum(num);

            num -= 1;
            num = num < 1 ? 1 : num;
            $("#goodsNum").val(num);
            sum();

        };

        // 是否为数字判断
        function ifNum(num) {
            if(num < 1 || !($.isNumeric(num))){
                alert("请输入正确的商品数量");
            }

        };

        // 全选
        function checkAll(checkValue) {
            // 获取所有name属性为hobby的checkbox 元素
            var checkboxs = document.getElementsByName("pro");
            // 将选中的checkbox元素的check属性，改为true
            for (var i = 0; i < checkboxs.length; i++){
                checkboxs[i].checked = checkValue;
            }

        };

        // 全选 / 全不选
        function checkChange(srcEl) {
            checkAll(srcEl.checked);
        };

        // 勾选同步
        function ifAll() {
            //var res = true; // flag
            var len = $("#list input[name='pro']").length;
            var len2 = $("#list input[name='pro']:checked").length;
            console.log(len);
            console.log(len2);
            if(len == len2){
                $("#checkAll").prop("checked", true);
            } else {
                $("#checkAll").prop("checked", false);

            }
        };

        // 价格小记
        function sum() {
            var sum = 0;
            var num = $("#goodsNum").val();
            console.log("num:" + num);
            var price = $("#price").html();
            console.log("price:" + price);
            sum = parseInt(num*price);
            console.log(sum);
            $("#sum").html(sum);
        };
        
        // 结算
        function submit() {
            // 判断是否勾选相应商品
            if($("#checkAll").prop("checked") == false){
                alert("请勾选商品");
                return;
            }

            // 判断积分是否足够购买商品
            // 获取总价
            var sum = $("#sum").html();
            sum = parseInt(sum);
            if(integral < sum){
                $(document).dialog({
                    type: "notice",
                    infoText: "穷是原罪😊",
                    autoClose: 2500,
                    position: "top"
                });
            } else {
                // 先求出剩余积分
                integral = integral - sum;

                $.ajax({
                    url:"/users/"+user.id+"/"+integral,
                    type:"PUT",
                    success:function () {
                        $(document).dialog({
                            type: "confirm",
                            style: "IOS",
                            titleShow: false,
                            content: "购买成功!",
                            buttons: [{
                                name: "跳转",
                                callback: function () {
                                    location.href = "/mine/shop.html";
                                }
                            }]
                        })
                    }
                })

            }
        }


    </script>
    <style>
        td{
            vertical-align: middle;
            text-align: center;
        }
    </style>
</head>
<body>
<div class="nav-search">
    <a href="javascript:history.go(-1);">
        <span><i class="fa fa-angle-left fa-2x" ></i></span>
    </a>
</div>
<hr>

<div class="row pro" style="width: 100%; margin: 0 auto;">
    <div class="row info">
        <div class="col-2" style="margin-right: 25px;">
            <a id="author_id">
                <img class="rounded-circle" render-src="headImgUrl" id="headImgUrl">
            </a>
        </div>
        <div class="col-8">
            <h5><strong render-html="email"></strong></h5>
            <ul class="list-inline">
                <li class="list-inline-item">
                    <small render-html="place"></small>
                </li>
                <li class="list-inline-item">
                    <small render-html="nickName"></small>
                </li>
            </ul>
        </div>
    </div>
</div>
<hr>
<h6 style="color: #D99531">我的购物车</h6>

<table class="table table-bordered" style="text-align: center;font-size: 8px;">
    <th>
        <input type="checkbox" id="checkAll" onchange="checkChange(this)">全选
        <td>商品图片</td>
        <td>商品名称</td>
        <td>单价</td>
        <td>数量</td>
        <td>小记</td>
    </th>
    <tr id="list">
        <td><input type="checkbox" id="single" name="pro" onclick="ifAll()"></td>
        <td><img render-src="coverUrl" style="height: 60px;width: 60px"></td>
        <td><span render-html="name" style="font-size: 8px"></span></td>
        <td>¥ <span class="price" id="price" render-html="price"></span></td>
        <td><a href="javascript:void(0)" onclick="sub()">-</a>
            <input type="text" render-value="count" name="num" id="goodsNum" style="text-align:center;font-size:8px; width: 15px;height: 20px;">

            <a href="javascript:void(0)" onclick="add()">+</a>
        </td>
        <td>¥ <span id="sum" render-html="price"></span></td>
    </tr>
</table>

<div style="margin-left:435px;">
    <a class="btn btn-warning submitBtn" role="button" onclick="submit()"><span class="glyphicon glyphicon-shopping-cart" aria-hidden="true"></span> 结 算</a>
</div>


</body>
</html>